import React, { useImperativeHandle, useRef } from "react";
import { useState } from "react";
// forwardRef 高阶函数 函数式组件的参数一 props 参数二为父组件的ref
//  forwardRef 高阶组件 可以为父组件转发任意ref节点
let Child = React.forwardRef((props,ref)=>{
    console.log(ref)
    let [num,setNum] = useState(0);
    let addNum = ()=>{
        setNum(num+1)
    }
    // 使用useImperativeHandle暴露给父组件状态或方法
    // 参数一 ref 参数二为回调函数 返回值为暴露给父组件的内容
    // 总结：父组件只要想获取子组件中状态或方法子组件就必须使用 forwardRef 和useImperativeHandle暴露
    useImperativeHandle(ref,()=>{   
        return {
            num:num,
            addNum:addNum
        }
    })
    return (
        <div>
            <h1 >我是一个子组件---{num}</h1>
        </div>
    )
})
function App(){
    // 使用useRef没有办法直接获取组件实例·
    let childRef = useRef();
    return (
        <div>
      
            <Child ref={childRef} />
            <button onClick={()=>{
                console.log(childRef)
                childRef.current.addNum();
            }}>获取child组件实例</button>
        </div>
    )
}

export default App;